<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>

</body>
<script>
    // 常见的链式操作
    // 链式操作 => 本质: 方法的返回值依旧是同种类型的数据(实例化对象)  依旧可以继续使用响应的拓展方法
    // var arr = [];  // 
    // var list = arr.concat(1, 2).concat(3, 4).concat(5, 6);
    // console.log(list);

    // var str = "YYYY-MM-DD".replace("YYYY", 2021).replace("MM", "9").replace("DD", 15);
    // console.log(str);
</script>
<script>

    debugger;
    var p = new Promise(function (resolve, reject) {
        debugger;
        setTimeout(function () {
            debugger;
            resolve(1);
            // reject(1);
        }, 2000)
    })

    // Promise的链式操作 
    // 1. 如果Promise实例的状态为已成功 走then()对应的回调函数  
    //    a.如果回调函数的返回值是普通类型(非Promise实例) 将数据继续向后传递(可以继续调用then方法)

    // 2. 如果Promise实例的状态为已失败,或者链式操作过程中出现错误, 会走catch()  

    // 链式
    // p.then(v => {
    //     console.log("已成功:", v);
    // }).then(v => {
    //     console.log("已成功:", v);
    //     return 3;
    // }).then(v => {
    //     console.log("已成功:", v);
    // }).catch(err => {
    //     console.log("已失败:", err);
    // })

    // 异步操作(setTimeout) => p => p1 => p2 => p3   默认都是进行中状态
    // 异步操作 成功
    //    p(成功:1) => p1(成功:2) =>  p2(成功:3) =>  p3(成功:undefind)
    // 异步操作 失败
    //    p(失败:1) => p1(失败:1) =>  p2(失败:1) =>  p3(失败:1)

    console.log("p", p);

    // 链式拆分
    var p1 = p.then(v => {
        debugger;
        console.log("已成功:", v);
        var pa = new Promise(function (resolve, reject) {
            debugger;
            setTimeout(function () {
                debugger;
                resolve("a");
            }, 2000)
        })
        return pa; // 等待两秒之后   pa => 已成功,存储的数据a
    })
    console.log("p1", p1);

    var p2 = p1.then(v => {
        debugger;
        console.log("已成功:", v);
        return 3;
    })
    console.log("p2", p2);

    var p3 = p2.then(v => {
        debugger;
        console.log("已成功:", v);
    })
    console.log("p3", p3);

    p3.catch(err => {
        debugger;
        console.log("已失败:", err);
    })




</script>

</html>